<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Hugo 搭建博客实践 - Creaink - Build something for life</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="Creaink" /><meta name="description" content="利用 Hugo 结合 git submodule 搭建方便个人笔记和博客同步的静态站点" /><meta name="keywords" content="Hugo, Blog, 博客, git submodule, note, markdown" />






<meta name="generator" content="Hugo 0.52 with even 4.0.0" />


<link rel="canonical" href="http://creaink.github.io/post/Devtools/Hugo/Hugo-intro/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">


<link href="/dist/even.56003f67.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="Hugo 搭建博客实践" />
<meta property="og:description" content="利用 Hugo 结合 git submodule 搭建方便个人笔记和博客同步的静态站点" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://creaink.github.io/post/Devtools/Hugo/Hugo-intro/" /><meta property="article:published_time" content="2019-01-08T19:27:12&#43;08:00"/>
<meta property="article:modified_time" content="2019-01-08T19:27:12&#43;08:00"/>

<meta itemprop="name" content="Hugo 搭建博客实践">
<meta itemprop="description" content="利用 Hugo 结合 git submodule 搭建方便个人笔记和博客同步的静态站点">


<meta itemprop="datePublished" content="2019-01-08T19:27:12&#43;08:00" />
<meta itemprop="dateModified" content="2019-01-08T19:27:12&#43;08:00" />
<meta itemprop="wordCount" content="3437">



<meta itemprop="keywords" content="Hugo,Git,Markdown," />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Hugo 搭建博客实践"/>
<meta name="twitter:description" content="利用 Hugo 结合 git submodule 搭建方便个人笔记和博客同步的静态站点"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Creaink</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post.html">
        <li class="mobile-menu-item">Archives</li>
      </a><a href="/tags.html">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/categories.html">
        <li class="mobile-menu-item">Categories</li>
      </a><a href="/links.html">
        <li class="mobile-menu-item">Links</li>
      </a><a href="/about.html">
        <li class="mobile-menu-item">About</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Creaink</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post.html">Archives</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags.html">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories.html">Categories</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/links.html">Links</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about.html">About</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">Hugo 搭建博客实践</h1>

      <div class="post-meta">
        <span class="post-time">&nbsp;<i class="iconfont icon-calendar"></i> 2019-01-08 </span>
          <span class="more-meta"> <i class="iconfont icon-book"></i> 3437 words </span>
          <span class="more-meta"> <i class="iconfont icon-clock"></i> 7 mins read </span>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">Contents</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
<ul>
<li>
<ul>
<li><a href="#安装">安装</a></li>
<li><a href="#新建站点">新建站点</a>
<ul>
<li><a href="#使用主题">使用主题</a>
<ul>
<li><a href="#定制">定制</a></li>
</ul></li>
<li><a href="#集成笔记">集成笔记</a></li>
<li><a href="#部署到-github-pages">部署到 GitHub Pages</a></li>
<li><a href="#存在的问题">存在的问题</a></li>
</ul></li>
<li><a href="#hugo-特性">hugo 特性</a>
<ul>
<li><a href="#常用命令">常用命令</a></li>
<li><a href="#front-matter">Front Matter</a></li>
<li><a href="#内容摘要">内容摘要</a></li>
<li><a href="#shortcodes">Shortcodes</a></li>
<li><a href="#even-主题便捷">Even 主题便捷</a></li>
</ul></li>
<li><a href="#参考">参考</a></li>
</ul></li>
</ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <p>如何利用 Hugo 构建一个方便于 markdown 发表博客和记笔记的统一工程，这篇文章给出了我实践中的一种思路：利用 Git 的 submodule 组合了笔记仓库、GitHub Pages仓库、Hugo 主题仓库、Hugo 博客仓库等四个 Git 仓库，构成一个利用开源工具实现的的分布式博客和笔记方案。</p>

<p>早在 16 年的时候就尝试过使用 Hexo 利用 GitHub pages 搭建过个人博客，当时也只是跑通了个流程，随后也就没管过。</p>

<p>一是当时记笔记基本上使用 OneNote，再将其转为 markdown 很费事费神，到后面面对跨设备写笔记的场景越来越多和对笔记软件服务商的不信任，进而转为采用 git + 文件系统 + VSCode + markdown 的方式记笔记。</p>

<p>二是总觉得 nodejs 下的 Hexo 过于繁杂，不太适合我，直到遇到使用 Golang 写的静态博客生成器 Hugo，仅需要一个可执行文件即可完成博客编写环境的搭建，简洁高效，正是我想要的。</p>

<h2 id="安装">安装</h2>

<p>如果不需要二次定制的话，得益于 go 的特性，只需在 <a href="https://github.com/gohugoio/hugo/releases" target="_blank">releases</a> 里下载相应平台的可执行文件，复制或者链接到 PATH 的搜索路径下即可。</p>

<p>如果使用源码安装可以使用下面的方式，推荐使用发版本安装。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-shell" data-lang="shell"><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-shell" data-lang="shell">$ go get -u -v github.com/gohugoio/hugo</code></pre></td></tr></table>
</div>
</div>
<h2 id="新建站点">新建站点</h2>

<p>安装完 hugo 之后即可立即开始：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-shell" data-lang="shell"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-shell" data-lang="shell">$ hugo new site blog
$ tree blog
blog
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes</code></pre></td></tr></table>
</div>
</div>
<p>其中 <code>config.toml</code> 是整个网站的配置文件，其他的文件夹的作用：</p>

<ul>
<li>archetypes：包括内容类型，在创建新内容时自动生成内容的配置。</li>
<li>content：包括网站内容，全部使用 markdown 格式。</li>
<li>layouts：包括了网站的模版，决定内容如何呈现，目录下模板优先级高于 <code>/themes/&lt;THEME&gt;/layouts/</code>，可以用来小规模的定制主题。</li>
<li>static：包括了 css, js, fonts, media 等，决定网站的外观。</li>
</ul>

<p>content 内支持任何级别的文件夹和文件的嵌套，最后的文件系统里 markdown 文件路径和最后站点 url 的对应关系一般如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-txt" data-lang="txt"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-txt" data-lang="txt">.
└── content
    └── about
    |   └── _index.md  // &lt;- https://example.com/about/
    ├── post
    |   ├── firstpost.md   // &lt;- https://example.com/post/firstpost/
    |   ├── happy
    |   |   └── ness.md  // &lt;- https://example.com/post/happy/ness/
    |   └── secondpost.md  // &lt;- https://example.com/post/secondpost/
    └── quote
        ├── first.md       // &lt;- https://example.com/quote/first/
        └── second.md      // &lt;- https://example.com/quote/second/</code></pre></td></tr></table>
</div>
</div>
<p>有两个文件名名字是有特殊含义的： <code>_index.md</code> 和 <code>index.md</code> 可以用于组织页面，更多请参考 Hugo 官方文档。</p>

<h3 id="使用主题">使用主题</h3>

<p>刚新建的 hugo 站点直接使用 <code>hugo server</code> 是跑不起来的，hugo 没有自带主题，所以需要在 <a href="https://themes.gohugo.io/" target="_blank">hugo themes</a> 找一个主题然后解压到 <code>themes</code> 文件夹下。</p>

<p>我的推荐方式是 fork 一个主题到你的 GitHub 上，然后使用 git submodule 的方式添加到 themes 里。比如这里我用的一个简洁风格主题 <a href="https://github.com/olOwOlo/hugo-theme-even" target="_blank">even</a>，然后：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-shell" data-lang="shell"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-shell" data-lang="shell">$ git init
$ git submodule add https://github.com/creaink/hugo-theme-even themes/even
<span class="c1"># 添加原本仓库，以便合并</span>
$ git remote add even https://github.com/olOwOlo/hugo-theme-even
$ git remote -v
even    https://github.com/olOwOlo/hugo-theme-even <span class="o">(</span>fetch<span class="o">)</span>
even    https://github.com/olOwOlo/hugo-theme-even <span class="o">(</span>push<span class="o">)</span>
origin  https://github.com/creaink/hugo-theme-even <span class="o">(</span>fetch<span class="o">)</span>
origin  https://github.com/creaink/hugo-theme-even <span class="o">(</span>push<span class="o">)</span>

$ git pull even master</code></pre></td></tr></table>
</div>
</div>
<h4 id="定制">定制</h4>

<p>第一次使用 even 需要将 <code>themes/even/exampleSite/config.toml</code> 模板配置文件复制到根目录，然后根据此文件来配置你的设置。有几个有必要修改的地方：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml"><span class="c"># 这个是需要改的</span>
<span class="nx">baseURL</span> <span class="p">=</span> <span class="s2">&#34;http://creaink.github.io/&#34;</span>

<span class="c"># HTML head title</span>
<span class="nx">title</span>

<span class="c"># footer 里的 author</span>
<span class="p">[</span><span class="nx">author</span><span class="p">]</span>
  <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;&lt;a href=&#34;https://creaink.github.com&#34; class=&#34;theme-link&#34;&gt;Creaink&lt;/a&gt;&#39;</span>

<span class="p">[</span><span class="nx">params</span><span class="p">]</span>
  <span class="nx">since</span> <span class="p">=</span> <span class="s2">&#34;2017&#34;</span>        <span class="c"># 站点建立时间</span>
  <span class="nx">logoTitle</span> <span class="p">=</span> <span class="s2">&#34;Even&#34;</span>    <span class="c"># 顶部 banner 标题</span>
  <span class="nx">keywords</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;Hugo&#34;</span><span class="p">,</span> <span class="s2">&#34;theme&#34;</span><span class="p">,</span> <span class="s2">&#34;even&#34;</span><span class="p">]</span> <span class="c"># HTML head meta keyword</span>
  <span class="nx">description</span> <span class="p">=</span> <span class="s2">&#34;Hugo theme even example site.&#34;</span> <span class="c"># HTML head meta description</span>

<span class="c"># 一些社交链接</span>
<span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">social</span><span class="p">]</span></code></pre></td></tr></table>
</div>
</div>
<p>之后更改下位于 <code>themes/even/static/</code> 站点的图标，可以找一找适合做 favicon 的图然后在 <a href="https://www.favicon-generator.org/" target="_blank">favicon generator</a> 生成各种尺寸的替换目录下（也可放于顶级 layout 目录下）的东西。</p>

<p>最后我还做了些其他的定制和修改，如在配置文件里：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml"><span class="c"># 文章内连接用新标签打开</span>
<span class="p">[</span><span class="nx">blackfriday</span><span class="p">]</span>
  <span class="nx">hrefTargetBlank</span> <span class="p">=</span> <span class="kc">true</span>

<span class="c"># 谷歌分析，分析站点访问</span>
<span class="nx">googleAnalytics</span>

<span class="c"># 来必力评论</span>
<span class="nx">livereUID</span>

<span class="c"># 字数统计和预计时间</span>
<span class="nx">moreMeta</span> <span class="p">=</span> <span class="kc">true</span>

<span class="c"># 不蒜子统计阅读次数，siteUV sitePV pagePV 可自行设置</span>
  <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">busuanzi</span><span class="p">]</span>
    <span class="nx">enable</span> <span class="p">=</span> <span class="kc">true</span>

<span class="c"># 增加友链和关于界面，之后新增 /content/links.md 和 /content/about.md 两篇文章即可</span>
<span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span>
  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Links&#34;</span>
  <span class="nx">weight</span> <span class="p">=</span> <span class="mi">50</span>
  <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;links&#34;</span>
  <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/links/&#34;</span>
<span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span>
  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;About&#34;</span>
  <span class="nx">weight</span> <span class="p">=</span> <span class="mi">60</span>
  <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span>
  <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/about/&#34;</span></code></pre></td></tr></table>
</div>
</div>
<p>最后再小小地修改了下样式（需要有 nodejs 和 yarn 环境，参考 even 项目主页）。</p>

<h3 id="集成笔记">集成笔记</h3>

<p>使用 <code>hugo new post/start.md</code> 命令就可根据 <code>archetypes/default.md</code>  模板创建一个 <code>content/post/start.md</code> 文件，然后 <code>even</code> 主题的 index 显示的就是 post section 内容的文章，然后使用 <code>hugo server -D</code> （-D 是允许草稿）随后就可以在主页看见了。</p>

<p>除了将 theme 作为 git submodule 之外，如果你习惯于用 markdown 写东西，并且利用文件系统来管理的话，可以将你的笔记做一个单独的 git repo 然后再作为 submodule 集成添加到 <code>content/post</code> 目录下。然后再写 markdown 的笔记时候，文件开头加上一个：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml">---<span class="w">
</span><span class="w"></span>draft<span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span>---</code></pre></td></tr></table>
</div>
</div>
<p>之后照常即可，这样 hugo build 或者 server 时候不强制指定 draft 的话，这些笔记是不会被主动发现的。稍后要发表了，可以将 <code>draft</code> 改为 false 并且完善下其他属性内容（可以 <code>hugo new</code> 一个然后粘贴修改下），而 hugo 强大的性能可以保证在笔记文件众多的时候也可以高效完成这事。如果笔记众多需要统一添加 draft 开头的话可以使用 <code>find . -iname &quot;*.md&quot; -exec sed -i '1i---\ndraft: true\n---' {} \;</code> 命令来自动添加。</p>

<p><strong>这样做的好处是可以随时保持笔记和博客文章的同步</strong>，避免出现笔记的记录和展现之间分叉。同时在使用 markdown 做笔记的同时能够随时分享。具体添加 submodule 参考 <a href="###使用主题">使用主题</a> 里的步骤，这里就不再赘述了。</p>

<h3 id="部署到-github-pages">部署到 GitHub Pages</h3>

<p>hugo 生成的静态文件会存放到 <code>public</code> 文件夹下，按照上面的套路，可以将其也作为 submodule 添加。步骤和前面的一致，也可参考 <a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/" target="_blank">hosting on github</a>。</p>

<p>最后整个静态博客可能会使用到四个代码仓库，结构如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-txt" data-lang="txt"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-txt" data-lang="txt">[blog](hugo 生成的站点总仓库)
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── [post](markdown 笔记仓库)
├── data
├── [public](GitHub pages 仓库)
├── layouts
├── static
└── themes
    └── [even](fork 自 even 的主题仓库)</code></pre></td></tr></table>
</div>
</div>
<p>可以根据使用场景对不同的仓库设置为 public 或者 private，如这里由于某些隐私的问题我就将<strong>总站点仓库</strong>和<strong>笔记仓库</strong>设置为私有（时值微软开放 GitHub private 仓库，为微软大法打 call）。</p>

<h3 id="存在的问题">存在的问题</h3>

<p>在结合 markdown 笔记和站点的时候遇到些问题，需要互相妥协。</p>

<p><strong>图片问题</strong>，在写 markdown 笔记的时候我常常用相对路径来存一些简单的图片到本地，但是到 hugo 上，笔记工程是在 <code>post</code> 目录下，这样绝对路径肯定是不对的了，相对路径由文章 hello 于是 <code>/post/hello/</code> 的样式导致相对路径也不对。</p>

<p>不过可以使用 <code>uglyurls = true</code> 配置使得其路径变为 <code>/post/hello.html</code> ，这样图片的相对路径就对了。但是，本地的图片不会有 draft 的配置，总是会在生成静态文件时候一股脑生成到 public 文件夹下，不过除了使用图床存图片好像也没有其他解决方法了，这样的话上文提到的菜单栏的 URL 就要更改下了，如 <code>url = &quot;/about.html&quot;</code>。</p>

<p>同时大小写敏感导致找不到图片的问题可以使用 <code>disablePathToLower = true</code> 配置来解决。</p>

<p><strong>markdown 引用</strong>，传统的 <code>[ref](rel/to/file.md)</code> 在静态站点上并用不了，能想出的解决方法就是当为发布的文章时候，把传统的注释掉然后换上站点上的绝对路径🤣。</p>

<p><strong>自动更新修改日期</strong>，参考 <a href="https://gohugo.io/getting-started/configuration/#configure-dates" target="_blank">configure-dates</a>，只要是 <code>enableGitInfo = true</code> 那么 lastmod 是可以自动设置为该文件的 commit 时间，但是有一个问题就是 hugo 现在还不指定哪一个 repo 的 git，不知道以后有没有解决方法。</p>

<h2 id="hugo-特性">hugo 特性</h2>

<h3 id="常用命令">常用命令</h3>

<ul>
<li><code>hugo new site SITE_NAME</code> 生成静态博客项目</li>
<li><code>hugo server</code> 启动本地服务器，加上 <code>-D</code> 可以渲染 draft</li>
<li><code>hugo new post/new-content.md</code> 在 post 下新建一篇文章</li>
<li><code>hugo</code> 生成站点静态文件</li>
<li><code>hugo list drafts/expired/future</code> 列出特点的文件</li>
</ul>

<h3 id="front-matter">Front Matter</h3>

<p>markdown 文件开头的 <code>---</code> 内的内容称为 Front Matter，用于文章生成的一些控制，Hugo 支持TOML、YAML、JSON格式的Front Matter，下面节选些常用的配置：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml">---<span class="w">
</span><span class="w"></span>title<span class="p">:</span><span class="w"> </span><span class="s2">&#34;文章标题&#34;</span><span class="w">
</span><span class="w"></span>description<span class="p">:</span><span class="w"> </span><span class="s2">&#34;文章的描述信息&#34;</span><span class="w">
</span><span class="w"></span><span class="c"># 建议对标签的理解为：文章所涉及到的技术、内容点，越多越好</span><span class="w">
</span><span class="w"></span>tags<span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">&#34;标签1&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;标签2&#34;</span><span class="p">]</span><span class="w">
</span><span class="w"></span><span class="c"># 建议对目录的理解为：文章所属的系列，越少越好</span><span class="w">
</span><span class="w"></span>categories<span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">&#34;分类1&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;分类2&#34;</span><span class="w"> </span><span class="p">]</span><span class="w">
</span><span class="w"></span><span class="c"># 关键词用于 HTML head 的 keyword</span><span class="w">
</span><span class="w"></span>keywords<span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">&#34;Hugo&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;blog&#34;</span><span class="w"> </span><span class="p">]</span><span class="w">
</span><span class="w"></span>date<span class="p">:</span><span class="w"> </span><span class="ld">2019-01-01</span><span class="w">
</span><span class="w"></span>lastmod<span class="p">:</span><span class="w"> </span><span class="m">2019</span>-<span class="m">1</span>-<span class="m">1</span><span class="w">
</span><span class="w"></span><span class="c"># CJKLanguage: Chinese, Japanese, Korean</span><span class="w">
</span><span class="w"></span>isCJKLanguage<span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 如果draft为true，除非使用 --buildDrafts 参数，否则不会发布文章</span><span class="w">
</span><span class="w"></span>draft<span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 设置文章的过期时间，已过期的文章不会发布，除非使用 --buildExpired 参数</span><span class="w">
</span><span class="w"></span>expiryDate<span class="p">:</span><span class="w"> </span><span class="ld">2020-01-01</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 设置文章的发布时间，未来的文章不会发布，除非使用 --buildFuture 参数</span><span class="w">
</span><span class="w"></span>publishDate<span class="p">:</span><span class="w"> </span><span class="ld">2020-01-01</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 文章排序权重</span><span class="w">
</span><span class="w"></span>weight<span class="p">:</span><span class="w"> </span><span class="m">40</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 还有些有些第三方自定义的</span><span class="w">
</span><span class="w"></span>comment<span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span>hiddenFromHomePage<span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span>contentCopyright<span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span>reward<span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span>---</code></pre></td></tr></table>
</div>
</div>
<p>有些配置是可以指定默认值，不必每一篇都这样设置，可以参考 <a href="https://gohugo.io/getting-started/configuration/#configure-front-matter" target="_blank">configure-front-matter</a>。</p>

<p>这里夹带点自己对博客的 categories 和 keywords 的理解：</p>

<ul>
<li><code>categories</code>: 目录，文章所属的系列，关键词越少越好，也可理解为专栏。</li>
<li><code>tags</code>: 标签，文章所涉及到的技术、内容、知识点，关键词越多越好。</li>
</ul>

<h3 id="内容摘要">内容摘要</h3>

<p>Hugo 会自动提取文章的前 70 个字符(hasCJKLanguage )作为摘要，可以在文章内使用 <code>&lt;!--more--&gt;</code> 注释进行强行分割。</p>

<h3 id="shortcodes">Shortcodes</h3>

<p>Shortcodes 帮助你在编写 markdown 时快捷的插入 HTML 代码，也可以编写自己的 Shortcodes，放置于根目录或者主题目录的 <code>layouts/shortcodes</code> 下。</p>

<h3 id="even-主题便捷">Even 主题便捷</h3>

<p>Even 主题提供了很多方便地方，如 markdown 的一些扩展，具体可以参考 <code>even/exampleSite/content</code> 内的文章。</p>

<h2 id="参考">参考</h2>

<ul>
<li><a href="https://blog.olowolo.com/post/hugo-quick-start/" target="_blank">Hugo 从入门到会用</a></li>
<li><a href="https://gohugo.io/documentation/" target="_blank">Hugo Docs</a></li>
</ul>
    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">Author</span>
    <span class="item-content"><a href="https://creaink.github.com" class="theme-link">Creaink</a></span>
  </p>
  <p class="copyright-item">
    <span class="item-title">LastMod</span>
    <span class="item-content">2019-01-08</span>
  </p>
  
  <p class="copyright-item">
    <span class="item-title">License</span>
    <span class="item-content"><a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a></span>
  </p>
</div><footer class="post-footer">
      <div class="post-tags">
        <div style="margin-bottom:5px">
          <i class="iconfont icon-folder-open"></i>
            <a href="/categories/Hugo/">Hugo</a>
            </div>
        <div>
          <i class="iconfont icon-label"></i>
            <a href="/tags/Hugo/">Hugo</a>
            <a href="/tags/Git/">Git</a>
            <a href="/tags/Markdown/">Markdown</a>
            </div>
      </div>

      
      <nav class="post-nav">
        <a class="prev" href="/post/Computer/Linux/Linux-namespace/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Linux Namespace 技术与 Docker 原理浅析</span>
            <span class="prev-text nav-mobile">Prev</span>
          </a>
        
      </nav>
    </footer>
  </article>
        </div>
        <div id="lv-container" data-id="city" data-uid="MTAyMC80MjAzOS8xODU4Ng">
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];

        if (typeof LivereTower === 'function') { return; }

        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;

        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
    <noscript>Please enable JavaScript to view the comments powered by <a href="https://livere.com/">LiveRe.</a></noscript>
    </div>

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:gcreaink@gmail.com" class="iconfont icon-email" title="email"></a>
      <a href="https://github.com/creaink" class="iconfont icon-github" title="github"></a>
  <a href="http://creaink.github.io/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    Powered by <a class="hexo-link" href="https://gohugo.io">Hugo</a>
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    Theme - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2019
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author"><a href="https://creaink.github.com" class="theme-link">Creaink</a></span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/dist/even.26188efa.min.js"></script>


<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-131846852-1', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>







</body>
</html>
